<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "default",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
const navbarHeight = uni.getSystemInfoSync().statusBarHeight + 22;

const handlePurpleButtonClick = () => {
  console.log('点击了紫色按钮');
};

function backHome() {
  uni.switchTab({
    url: '/pages/about/about',
    success: () => {
      console.log('页面数据加载成功');
    },
    fail: (err) => {
      console.log(err);
    }
  });
}
</script>

<template>
  <view
    class="content"
    :style="{ paddingTop: `${navbarHeight}px` }"
  >
    <view>
      <button @click="backHome">跳转页面</button>
    </view>
    <view>
      <button
        class="my-4 w-40 bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 focus:outline-none focus:ring focus:ring-purple-300 active:bg-blue-700 px-6 py-3 rounded-lg text-white font-semibold shadow-md transition duration-300 ease-in-out transform hover:scale-105"
        @click="handlePurpleButtonClick"
      >
        Click Me
      </button>
    </view>
  </view>
</template>
